<script setup>
import {onMounted, ref} from "vue";
import {DeleteG, ListG, SaveW, UpdateG} from "@/utils/api/admin.js";
import {ElMessage, ElMessageBox, ElNotification} from "element-plus";
import {dept, major} from "@/utils/model/graduate.js";

const data = ref([{
  sno: '',
  name: '',
  gender: '',
  dept: '',
  major: '',
  grade: '',
  phone: '',
  graduateDate: '',
  work: '',
}]);
const updateGradInfo = ref({
  sno: '',
  name: '',
  gender: '',
  dept: '',
  major: '',
  grade: '',
  phone: '',
  graduateDate: '',
  password: '',
});
const seSno = ref();
const seGrade = ref();
const upInfoVis = ref(false);
const chPassVis = ref(false);

const genderFormat = (gender) => {
  return (gender === 1 || gender === '1') ? '男' :
      (gender === 2 || gender === '2') ? '女' : '--';
}

const list = () => {
  data.value = [];
  ListG(seSno.value, seGrade.value).then(rs => {
    if (rs.code === 1) {
      data.value = rs.data;
    } else {
      ElMessage({
        message: '服务器错误',
        type: 'error',
      })
    }
  }).catch(error => console.error(error.toString()));
}

const upInfoOp = (index) => {
  upInfoVis.value = true;
  updateGradInfo.value = {...data.value[index].valueOf()};
}

const upInfo = () => {
  const g = updateGradInfo.value;
  if (g.sno === '' || g.name === '' || g.gender === '' ||
      g.dept === '' || g.major === '' || g.grade === '' ||
      g.phone === '' || g.graduateDate === '') {
    ElMessage({
      message: '更正信息有空项',
      type: 'warning',
    })
    return;
  }
  if(!(/^1[3-9]\d{9}$/.test(g.phone))) {
    ElMessage({
      message: '联系方式错误',
      type: 'error'
    });
    return;
  }
  UpdateG(g.sno, g.name, g.gender, g.dept, g.major, g.grade,
      g.phone, g.graduateDate, null).then(rs => {
    if (rs.code === 1) {
      ElMessage({
        message: '信息更正成功',
        type: 'success',
      });
    } else {
      ElMessage({
        message: '信息更正失败，请重试',
        type: 'error',
      })
    }
  }).catch(error => console.error(error.toString()));
  upInfoVis.value = false;
  setTimeout(() => list(), 1000);
}

const chPassOP = (sno) => {
  chPassVis.value = true;
  updateGradInfo.value.sno = sno;
}

const chPass = () => {
  const g = updateGradInfo.value;
  UpdateG(g.sno, null, null, null, null, null,
      null, null, g.password).then(rs => {
    if (rs.code === 1) {
      ElMessage({
        message: '密码修改成功',
        type: 'success',
      })
    } else {
      ElMessage({
        message: '密码修改失败，请重试',
        type: 'error',
      })
    }
  }).catch(error => console.error(error.toString()));
  chPassVis.value = false;
}

const delInfo = (sno) => {
  ElMessageBox({
    message: '确定删除该毕业生？',
    type: 'error',
    confirmButtonText: '确定',
  }).then(() => {
    DeleteG(sno).then(rs => {
      if (rs.code === 1) {
        ElNotification({
          message: '删除成功',
          type: 'success'
        });
        setTimeout(() => list(), 1000);
      } else {
        ElMessage({
          message: '删除失败',
          type: 'error',
        })
      }
    }).catch(error => console.error(error.toString()));
  }).catch(() => {
  })

}

onMounted(() => {
  list();
})

</script>

<template>
  <el-form label-width="80px" inline>
    <el-form-item label="学 号">
      <el-input v-model="seSno"/>
    </el-form-item>
    <el-form-item label="班 级">
      <el-input v-model="seGrade"/>
    </el-form-item>
    <el-form-item>
      <el-button @click="list" type="primary">搜 索</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="data" border stripe max-height="560px">
    <el-table-column prop="sno" label="学号" fixed="left"/>
    <el-table-column prop="name" label="姓名"/>
    <el-table-column label="性别">
      <template #default="scope">
        {{ genderFormat(scope.row.gender) }}
      </template>
    </el-table-column>
    <el-table-column prop="dept" label="学院"/>
    <el-table-column prop="major" label="专业"/>
    <el-table-column prop="grade" label="年级"/>
    <el-table-column prop="phone" label="联系方式"/>
    <el-table-column prop="graduateDate" label="毕业日期"/>
    <el-table-column prop="work" label="是否就业" fixed="right">
      <template #default="scope">
        <el-tag :type="scope.row.work === 1 ? 'success' : 'danger'">
          {{ scope.row.work === 1 ? '已就业' : '未就业' }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" fixed="right">
      <template #default="scope">
        <el-popover placement="left" trigger="click" :hide-after="0">
          <template #reference>
            <el-button type="primary" link @click="">操 作</el-button>
          </template>
          <div class="op-item">
            <el-button type="warning" link @click="upInfoOp(scope.$index)">更正信息</el-button>
            <hr>
          </div>
          <div class="op-item">
            <el-button type="primary" link @click="chPassOP(scope.row.sno)">修改密码</el-button>
            <hr>
          </div>
          <div class="op-item">
            <el-button type="danger" link @click="delInfo(scope.row.sno)">删除毕业生</el-button>
            <hr>
          </div>
        </el-popover>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="upInfoVis" width="500px" align-center draggable @close="updateGradInfo = {}"
             :title="'更正信息__学号: '+updateGradInfo.sno">
    <el-form label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="updateGradInfo.name"/>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="updateGradInfo.gender">
          <el-radio :value="1" label="男"/>
          <el-radio :value="2" label="女"/>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="学 院">
        <el-select v-model="updateGradInfo.dept" placeholder="学 院" @change="updateGradInfo.major = ''">
          <el-option v-for="(item, index) in dept" :key="index" :value="item" :label="item"/>
        </el-select>
      </el-form-item>
      <el-form-item label="专 业">
        <el-select v-model="updateGradInfo.major" placeholder="专 业">
          <el-option v-for="(item, index) in major[updateGradInfo.dept]" :key="index" :value="item" :label="item"/>
        </el-select>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input v-model="updateGradInfo.phone"/>
      </el-form-item>
      <el-form-item label="毕业日期">
        <el-date-picker type="date" v-model="updateGradInfo.graduateDate"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="upInfo">更 正</el-button>
    </template>
  </el-dialog>

  <el-dialog v-model="chPassVis" width="400" title="修改密码" @close="updateGradInfo = {}">
    <el-input v-model="updateGradInfo.password" placeholder="输入新密码"/>
    <template #footer>
      <el-button type="warning" @click="chPass">修 改</el-button>
    </template>
  </el-dialog>

</template>

<style scoped>
.op-item {
  padding: 5px;
}
</style>